<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>
      <div class="kuang">
        <div class="tiao">
          <p>您的当前位置:</p>
          <router-link to="/">
            <p>首页</p>
          </router-link>
          <p> > </p>
          <p>礼拜五商城</p>
          <p> > </p>
          <p>新用户注册</p>
        </div>
      </div>
      <div class="kuang1">
        <div class="kuang2">
          <ul>
          <li class="lbw">
            <span class="libaiwu">礼拜五商城</span>
          </li>
            <li @click="guanyu" class="libai">关于礼拜五
              <span> > </span>
              <ul v-show="bol" class="zhuce" @click.stop>
                <router-link :to="item.name" v-for="(item,index) in arr">
                <li :class="{'xyhzc':active==index}" @click="xyhzc(index)">{{item.zc}} </li>
                </router-link>
              </ul>
            </li>
            <li @click="ps" class="libai">配送说明
              <span> > </span>
              <ul v-show="sm" class="zhuce" @click.stop >
                <li v-for="(item1,index) in arr1">{{item1.zc}}</li>
              </ul>
            </li>
            <li @click="shouhou" class="libai">售后服务
              <span> > </span>
              <ul v-show="fuwu" class="zhuce"@click.stop>
                <li >退货原则</li>
                <li>服务保障承诺</li>
                <li>验货与签收</li>
                <li>发票说明</li>
              </ul>
            </li>
            <li @click="jiameng" class="libai">加盟礼拜五
              <span> > </span>
              <ul v-show="jm" class="zhuce" @click.stop>
                <li>加盟条款</li>
                <li>公司简介</li>
                <li>服务协议</li>
              </ul>
            </li>
          </ul>

        </div>
        <div class="kaung3">
          <router-view></router-view>
        </div>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav';
  import Nav2 from '../com/Nav2';
  import Footer from '../com/Footer';
    export default {
        name: "Xyhzc",
         data(){
          return{
            bol: false,
          sm:false,
            fuwu:false,
            jm:false,
            active:-1,

            arr:[{name:'/Gywm', zc:'新用户注册'},
                 {name:'/Zxxd',zc:'在线下单'},
                 {name:'/Zffs', zc:'支付方式'}
                 ],
           arr1:[{zc:'配送说明'},
                 {zc:'运费说明'},
                 {zc:'配送说明'},
                 {zc:'发票说明'}
                 ],
          }

         },
      components:{
        Nav,
        Nav2,
        Footer
      },
      methods:{
        guanyu(){
          this.bol=!this.bol;
        },
        ps(){
          this.sm =!this.sm;
        },
        shouhou(){
          this.fuwu = !this.fuwu;
        },
        jiameng(){
          this.jm= !this.jm;
        },
        xyhzc(i){
          this.active = i;
        }

      },

    }
</script>

<style scoped>
  .kuang{
    width: 1280px;
    height: 55px;
    margin: 0 auto;
    line-height: 55px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #f4f4f4;
  }
  .tiao{
    width: 329px;
    height: 14px;
    color: #8a8a8a;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
.zhuce{
  color: #498e3d;

}
.kuang1{
  width: 1280px;
  /*height: 710px;*/
  margin: auto;
  /*background: red;*/
  display: flex;
  justify-content: space-between;
}

.kuang2{
  width: 169px;
  height: 710px;
  border: 1px solid #e9e9e9;
  /*background: aqua;*/
}
.lbw{
  height: 59px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 20px;
  color: #707070;
  line-height: 59px;
  padding-left: 21px;
  /*background: yellow;*/
}

.libaiwu{
  color: #666;
  font-size: 20px;
}
  .kaung3{
    width: 1085px;
    height: 1180px;
    border: 1px solid #e9e9e9;
    /*background: aqua;*/
  }
.libai{
  color: #666;
  font-size: 16px;
  margin-top: 20px;
  margin-left: 15px;
}
  .zhuce li{
    color: #ccc;
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer;
  }
 .zhuce .xyhzc{
    color: #498e3d;
    text-decoration: underline;
  }

</style>
